<template>
  <div>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-dark">{{ titleArray[0] }}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-light">{{ titleArray[1] }}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-dark">{{ titleArray[2] }}</div></el-col>
      <el-col :span="6"><div class="grid-content bg-light">{{ titleArray[3] }}</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: { 
    titleArray: {
      type: Array,
      required: true,
    }
  }
}
</script>

<style scoped>
.grid-content {
  color: #ffffff;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.bg-dark {
  background-color: #333333;
}

.bg-light {
  background-color: #999999;
}
</style>
